<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            tr.selected {color:red}
            tr.hovered {background-color:cyan}
            tr {padding:0}
            td {font-family:verdana; font-size:12px;border:0px;border-bottom: 1px solid black; margin:0;}
            table {width : 100%;}
            th.header {
                font-family:verdana; font-size:12px;border:0px;border-bottom: 1px solid black; margin:0; text-align:left;
            } 
        </style>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="jquery.tablesorter.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function()
            {
                var table = $("#sortable");
                table.tablesorter();
                table.click(function() {
                    table.trigger('update');
                });
            }
        );
        </script>
    </head>
    <body>
        <table id="sortable">
            <thead>
                <tr>
                    <th>col 1</th>
                    <th>col 2</th>
                    <th>col 3</th>
                </tr>
            </thead>
            <tbody>
                <tr class="">
                    <td>1</td>
                    <td>b</td>
                    <td>A</td>
                </tr>
                <tr class="">
                    <td>2</td>
                    <td>a</td>
                    <td>B</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
